<!--综合管理-->
<template>
  <div class="absolute top-111 left-37">
    <div class="w-507 h-918">
      <FirstLevelCard title="综合管廊统计">
        <div class="h-full space-y-20">
          <div class="h-265">
            <second-level-card2 title="综合管廊统计" :img="Component_19_2">
              <template #rightTitle>
                <el-select class="w-110 h-26" v-model="综合管廊统计_select_value" size="small">
                  <el-option
                    v-for="item in 综合管廊统计_select_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
              <div class="p-y-20 box-border h-222">
                <bar-chart class="" :categories="categories" :dataSeries="dataSeries"></bar-chart>
              </div>
            </second-level-card2>
            <!--<div class="h-full">-->
            <!--</div>-->
          </div>
          <div class="h-265">
            <div class="h-full">
              <second-level-card2 title="监测设备统计" :img="Component_18_2">
                <template #rightTitle>
                  <tabs-batton
                    :tabs="监测设备统计_select_options"
                    v-model="监测设备统计_select_value"
                  >
                  </tabs-batton>
                </template>
                <bubble-chart :items="circleItems"></bubble-chart>
              </second-level-card2>
            </div>
          </div>
          <div class="h-278">
            <div class="h-full">
              <second-level-card2 title="入廊管线长度统计" :img="Component_18_2">
                <template #rightTitle>
                  <el-select
                    class="w-110 h-26"
                    v-model="入廊管线长度统计_select_value"
                    size="small"
                  >
                    <el-option
                      v-for="item in 入廊管线长度统计_select_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <div class="p-x-20">
                  <TProgress
                    type="red"
                    top="TOP.1"
                    label="2023年"
                    :denominator-value="100"
                    :numerator-value="100"
                    label-bg="898766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="yellow"
                    top="TOP.2"
                    label="2022年"
                    :denominator-value="100"
                    :numerator-value="90"
                    label-bg="798766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="blue"
                    top="TOP.3"
                    label="2021年"
                    :denominator-value="100"
                    :numerator-value="80"
                    label-bg="690766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="blue"
                    top="TOP.4"
                    label="2020年"
                    :denominator-value="100"
                    :numerator-value="60"
                    label-bg="598766"
                    label-sm="公里"
                  ></TProgress>
                </div>
              </second-level-card2>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
  </div>
  <div class="absolute top-111 left-564">
    <div class="w-507 h-918">
      <FirstLevelCard title="管线统计">
        <div class="h-full space-y-20">
          <div class="h-265">
            <div class="h-full">
              <second-level-card2 title="管线类型统计" :img="Component_19_2">
                <template #rightTitle>
                  <el-select class="w-110 h-26" v-model="管线类型统计_select_value" size="small">
                    <el-option
                      v-for="item in 管线类型统计_select_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <div class="h-full">
                  <div class="h-32 m-b-6">
                    <BlueBand>
                      <div class="flex color-white items-center text-16 text-align-left h-32">
                        <div class="w-20%"></div>
                        <div class="w-40% z-9999">管线类型</div>
                        <div class="w-40% z-9999">管线长度</div>
                      </div>
                    </BlueBand>
                  </div>
                  <div class="space-y-5">
                    <div class="h-32">
                      <green-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="1" color="#FFC106"></l-num>
                          </div>
                          <div class="w-40% z-9999">雨水</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </green-band>
                    </div>
                    <div class="h-32">
                      <blank-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="2" color="#FFC106"></l-num>
                          </div>
                          <div class="w-40% z-9999">污水</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </blank-band>
                    </div>
                    <div class="h-32">
                      <brown-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="3" color="#FF7A06"></l-num>
                          </div>
                          <div class="w-40% z-9999">雨污合流</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </brown-band>
                    </div>
                    <div class="h-32">
                      <brown-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="4" color="#FF7A06"></l-num>
                          </div>
                          <div class="w-40% z-9999">供水</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </brown-band>
                    </div>
                  </div>
                </div>
              </second-level-card2>
            </div>
          </div>
          <div class="h-265">
            <div class="h-full">
              <second-level-card2 title="老旧管网改造" :img="Component_19_2">
                <template #rightTitle>
                  <el-select class="w-110 h-26" v-model="老旧管网改造_select_value" size="small">
                    <el-option
                      v-for="item in 老旧管网改造_select_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <bar-chart
                  :categories="categories_oldpipeline"
                  :dataSeries="dataSeries_oldpipeline"
                ></bar-chart>
              </second-level-card2>
            </div>
          </div>
          <div class="h-278">
            <div class="h-full">
              <second-level-card2 title="管线统计" :img="Component_19_2">
                <template #rightTitle>
                  <el-select class="w-110 h-26" v-model="管线统计_select_value" size="small">
                    <el-option
                      v-for="item in 管线统计_select_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <div class="h-full">
                  <div class="h-32 m-b-6">
                    <BlueBand>
                      <div class="flex color-white items-center text-16 text-align-left h-32">
                        <div class="w-20%"></div>
                        <div class="w-40% z-9999">探测时间</div>
                        <div class="w-40% z-9999">管线长度</div>
                      </div>
                    </BlueBand>
                  </div>
                  <div class="space-y-5">
                    <div class="h-32">
                      <green-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="1" color="#FFC106"></l-num>
                          </div>
                          <div class="w-40% z-9999">2023年</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </green-band>
                    </div>
                    <div class="h-32">
                      <blank-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="2" color="#FFC106"></l-num>
                          </div>
                          <div class="w-40% z-9999">2022年</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </blank-band>
                    </div>
                    <div class="h-32">
                      <brown-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="3" color="#FF7A06"></l-num>
                          </div>
                          <div class="w-40% z-9999">2021年</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </brown-band>
                    </div>
                    <div class="h-32">
                      <brown-band>
                        <div class="flex color-white items-center text-16 text-align-left h-32">
                          <div class="w-20% z-9999">
                            <l-num :num="4" color="#FF7A06"></l-num>
                          </div>
                          <div class="w-40% z-9999">2020年</div>
                          <div class="w-40% z-9999">
                            <label3
                              :size="[20, 14]"
                              text-bg="33680"
                              text-sm="公里"
                              :gap="10"
                              :color="['#ffffff', '#ffffff']"
                            ></label3>
                          </div>
                        </div>
                      </brown-band>
                    </div>
                  </div>
                </div>
              </second-level-card2>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
  </div>
  <div class="absolute top-111 right-576">
    <div class="w-507 h-350">
      <FirstLevelCard title="管线建设计划">
        <div class="h-full">
          <second-level-card2 title="管线建设计划" :img="Component_19_2">
            <template #rightTitle>
              <el-select class="w-110 h-26" v-model="管线建设计划_select_value" size="small">
                <el-option
                  v-for="item in 管线建设计划_select_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
            <bar-chart
              :categories="categories_pipelineplan"
              :dataSeries="dataSeries_pipelineplan"
            ></bar-chart>
          </second-level-card2>
        </div>
      </FirstLevelCard>
    </div>
    <div class="w-507 h-554 m-t-15">
      <FirstLevelCard title="修补测统计">
        <div class="h-full">
          <div class="h-32 m-b-20">
            <BlueBand>
              <div class="flex color-white items-center text-16 text-align-left h-32">
                <div class="w-15%"></div>
                <div class="w-15% z-9999">年度</div>
                <div class="w-40% z-9999">修补测长度</div>
                <div class="w-30% z-9999">总长度</div>
              </div>
            </BlueBand>
          </div>
          <div class="space-y-10">
            <div class="h-32">
              <green-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="1" color="#FFC106"></l-num>
                  </div>
                  <div class="w-15% z-9999">2023</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </green-band>
            </div>
            <div class="h-32">
              <blank-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="2" color="#FFC106"></l-num>
                  </div>
                  <div class="w-15% z-9999">2022</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </blank-band>
            </div>
            <div class="h-32">
              <brown-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="3" color="#FF7A06"></l-num>
                  </div>
                  <div class="w-15% z-9999">2021</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </brown-band>
            </div>
            <div class="h-32">
              <brown-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="4" color="#FF7A06"></l-num>
                  </div>
                  <div class="w-15% z-9999">2020</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </brown-band>
            </div>
            <div class="h-32">
              <brown-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="5" color="#FF7A06"></l-num>
                  </div>
                  <div class="w-15% z-9999">2019</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </brown-band>
            </div>
            <div class="h-32">
              <brown-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="6" color="#FF7A06"></l-num>
                  </div>
                  <div class="w-15% z-9999">2018</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </brown-band>
            </div>
            <div class="h-32">
              <brown-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="7" color="#FF7A06"></l-num>
                  </div>
                  <div class="w-15% z-9999">2017</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </brown-band>
            </div>
            <div class="h-32">
              <brown-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="8" color="#FF7A06"></l-num>
                  </div>
                  <div class="w-15% z-9999">2016</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </brown-band>
            </div>
            <div class="h-32">
              <brown-band>
                <div class="flex color-white items-center text-16 text-align-left h-32">
                  <div class="w-15% z-9999">
                    <l-num :num="9" color="#FF7A06"></l-num>
                  </div>
                  <div class="w-15% z-9999">2015</div>
                  <div class="w-40% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="10"
                      :color="['#ffffff', '#ffffff']"
                    >
                    </label3>
                  </div>
                  <div class="w-30% z-9999">
                    <label3
                      :size="[20, 14]"
                      text-bg="5336555"
                      text-sm="公里"
                      :gap="5"
                      :color="['#00F7FF', '#0084FE']"
                    ></label3>
                  </div>
                </div>
              </brown-band>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
  </div>
  <div class="absolute top-111 right-49">
    <div class="w-507 h-918">
      <FirstLevelCard title="更新监管统计">
        <div class="h-full space-y-16">
          <div class="h-32%">
            <div class="h-full">
              <second-level-card2 title="供图各单位确认率排名" :img="Component_18_2">
                <template #rightTitle>
                  <el-select
                    class="w-110 h-26"
                    v-model="供图各单位确认率排名_select_value"
                    size="small"
                  >
                    <el-option
                      v-for="item in 供图各单位确认率排名_select_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <div class="p-x-20">
                  <TProgress
                    type="red"
                    top="TOP.1"
                    label="2023年"
                    :denominator-value="100"
                    :numerator-value="100"
                    label-bg="898766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="yellow"
                    top="TOP.2"
                    label="2022年"
                    :denominator-value="100"
                    :numerator-value="90"
                    label-bg="798766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="blue"
                    top="TOP.3"
                    label="2021年"
                    :denominator-value="100"
                    :numerator-value="80"
                    label-bg="690766"
                    label-sm="公里"
                  ></TProgress>
                  <TProgress
                    type="blue"
                    top="TOP.4"
                    label="2020年"
                    :denominator-value="100"
                    :numerator-value="60"
                    label-bg="598766"
                    label-sm="公里"
                  ></TProgress>
                </div>
              </second-level-card2>
            </div>
          </div>
          <div class="h-32%">
            <div class="h-full">
              <second-level-card2 title="汇交案件数量" :img="Component_18_2">
                <template #rightTitle>
                  <tabs-batton
                    :tabs="汇交案件数量_select_options"
                    v-model="汇交案件数量_select_value"
                  >
                  </tabs-batton>
                </template>
                <line-chart
                  :categories="categories_casesubmitnum"
                  :dataSeries="dataSeries_casesubmitnum"
                ></line-chart>
              </second-level-card2>
            </div>
          </div>
          <div class="h-32%">
            <div class="h-full">
              <second-level-card2 title="规划核实统计" :img="Component_18_2">
                <template #rightTitle>
                  <el-select class="w-110 h-26" v-model="规划核实统计_select_value" size="small">
                    <el-option
                      v-for="item in 规划核实统计_select_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <bar-chart
                  :categories="categories_planverify"
                  :dataSeries="dataSeries_planverify"
                ></bar-chart>
              </second-level-card2>
            </div>
          </div>
        </div>
      </FirstLevelCard>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FirstLevelCard from '@/components/card/FirstLevelCard.vue'
import BarChart from '@/components/chart/BarChart.vue'
import LineChart from '@/components/chart/LineChart.vue'
import BubbleChart from '@/components/chart/BubbleChart.vue'
import Label3 from '@/components/label/Label3.vue'
import Component_19_2 from '@/assets/img/Component_19_2.png'
import Component_18_2 from '@/assets/img/Component_18_2.png'
import SecondLevelCard2 from '@/components/card/SecondLevelCard2.vue'
import TProgress from '@/components/progress/TProgress.vue'
import BlueBand from '@/components/band/BlueBand.vue'
import BlankBand from '@/components/band/BlankBand.vue'
import BrownBand from '@/components/band/BrownBand.vue'
import GreenBand from '@/components/band/GreenBand.vue'
import LNum from '@/components/label/LNum.vue'

import TabsBatton from '@/components/tabs/TabsBatton.vue'
import { ElSelect, ElOption } from 'element-plus'

const 综合管廊统计_select_value = ref('按年度')
const 综合管廊统计_select_options = [
  {
    value: '按年度',
    label: '按年度',
  },
]

const 监测设备统计_select_value = ref('按年度')
const 监测设备统计_select_options = [
  {
    value: '按年度',
    name: '按年度',
  },
  {
    value: '监测类型',
    name: '监测类型',
  },
]

const 入廊管线长度统计_select_value = ref('按年度')
const 入廊管线长度统计_select_options = [
  {
    value: '按年度',
    label: '按年度',
  },
]

const 管线类型统计_select_value = ref('管线类型')
const 管线类型统计_select_options = [
  {
    value: '管线类型',
    label: '管线类型',
  },
]

const 老旧管网改造_select_value = ref('按年度')
const 老旧管网改造_select_options = [
  {
    value: '按年度',
    label: '按年度',
  },
]
const 管线统计_select_value = ref('探测时间')
const 管线统计_select_options = [
  {
    value: '探测时间',
    label: '探测时间',
  },
]

const 管线建设计划_select_value = ref('按年度')
const 管线建设计划_select_options = [
  {
    value: '按年度',
    label: '按年度',
  },
]
const 供图各单位确认率排名_select_value = ref('按年度')
const 供图各单位确认率排名_select_options = [
  {
    value: '按年度',
    label: '按年度',
  },
]

const 汇交案件数量_select_value = ref('按年度')
const 汇交案件数量_select_options = [
  {
    value: '按年度',
    name: '按年度',
  },
  {
    value: '行业类型',
    name: '行业类型',
  },
]

const 规划核实统计_select_value = ref('按年度')
const 规划核实统计_select_options = [
  {
    value: '按年度',
    label: '按年度',
  },
]
//统合管廊统计
const categories = ref(['2018', '2019', '2020', '2021', '2022', '2023'].reverse())
const dataSeries = ref([
  {
    name: '综合管廊',
    data: [450, 180, 300, 400, 250, 300],
    startColor: '#67aef8',
    endColor: '#3464fb',
  },
  {
    name: '投入运营',
    data: [150, 360, 100, 100, 200, 150],
    startColor: '#f8ac03',
    endColor: '#f85702',
  },
])

//老旧管网改造
const categories_oldpipeline = ref(['2018', '2019', '2020', '2021', '2022', '2023'].reverse())
const dataSeries_oldpipeline = ref([
  { name: '未改造', data: [150, 0, 100, 0, 50, 0], startColor: '#f84647', endColor: '#f74041' },
  {
    name: '已改造',
    data: [450, 350, 300, 400, 360, 420],
    startColor: '#67aef8',
    endColor: '#3464fb',
  },
  {
    name: '计划改造',
    data: [450, 180, 300, 400, 250, 300],
    startColor: '#f8ac03',
    endColor: '#f85702',
  },
])

//管线建设计划
const categories_pipelineplan = ref(['2018', '2019', '2020', '2021', '2022', '2023'].reverse())
const dataSeries_pipelineplan = ref([
  {
    name: '完成情况',
    data: [450, 180, 300, 400, 250, 300],
    startColor: '#67aef8',
    endColor: '#3464fb',
  },
  {
    name: '建设计划',
    data: [150, 360, 100, 100, 200, 150],
    startColor: '#f8ac03',
    endColor: '#f85702',
  },
])

//规划核实
const categories_planverify = ref(['2018', '2019', '2020', '2021', '2022', '2023'].reverse())
const dataSeries_planverify = ref([
  {
    name: '已规划',
    data: [450, 180, 300, 400, 250, 300],
    startColor: '#67aef8',
    endColor: '#3464fb',
  },
  {
    name: '规划中',
    data: [150, 360, 100, 100, 200, 150],
    startColor: '#f8ac03',
    endColor: '#f85702',
  },
])

//汇交案件数量
const categories_casesubmitnum = ref(['2018', '2019', '2020', '2021', '2022', '2023'].reverse())
const dataSeries_casesubmitnum = ref([400, 350, 550, 420, 580, 270])

//气泡数据
const circleItems = [
  {
    title: '2018',
    num: 7,
    left: '4%',
    top: '4%',
    size: 75,
    numSize: 24,
    color: 'rgba(4, 206, 247, 1)',
    color1: 'rgba(18, 155, 255, 0.40)',
    color2: 'rgba(18, 155, 255, 0.1)',
  },
  {
    title: '2019',
    num: 8,
    left: '26%',
    top: '24%',
    size: 75,
    numSize: 20,
    color: 'rgba(255, 176, 56, 1)',
    color1: 'rgba(255, 176, 56, 0.28)',
    color2: 'rgba(255, 176, 56, 0.1)',
  },
  {
    title: '2020',
    num: 12,
    left: '45%',
    top: '10%',
    size: 90,
    numSize: 20,
    color: 'rgba(0, 242, 255, 1)',
    color1: 'rgba(54, 255, 243, 0.10)',
    color2: 'rgba(54, 255, 243, 0.40)',
  },
  {
    title: '2021',
    num: 9,
    left: '61%',
    top: '60%',
    size: 75,
    numSize: 20,
    color: 'rgba(255, 131, 205, 1)',
    color1: 'rgba(255, 131, 205, 0.10)',
    color2: 'rgba(255, 131, 205, 0.40)',
  },
  {
    title: '2022',
    num: 20,
    left: '80%',
    top: '20%',
    size: 86,
    numSize: 20,
    color: 'rgba(189, 255, 0, 1)',
    color1: 'rgba(189, 255, 0, 0.10)',
    color2: 'rgba(189, 255, 0, 0.40)',
  },
  {
    title: '2023',
    num: 11,
    left: '7%',
    top: '44%',
    size: 96,
    numSize: 24,
    color: 'rgba(255, 245, 0, 1)',
    color1: 'rgba(250, 255, 0, 0.28)',
    color2: 'rgba(250, 255, 0, 0)',
  },
]
</script>

<style scoped>
:deep(.el-select) {
  display: block;
}

:deep(.el-select__wrapper) {
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #609dbf;
}

:deep(.el-select__placeholder) {
  font-size: 14px;
}

:deep(.el-select--small .el-select__wrapper) {
  gap: 4px;
  padding: 2px 8px;
  max-height: 26px;
  min-height: 26px;
  line-height: 20px;
  font-size: 14px;
}
</style>
